<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/base.js"></script>
    <script src="js/md5.js"></script>
</head>
<body>
<input id="signName" type="text" placeholder="请输入用户名、手机号、邮箱"><br>
<input id="password" type="password" placeholder="请输入密码"><br>
<button onclick="return onSignInClick();">登录</button><br>
<button onclick="return requestTest();">请求test接口</button><br>
<div id="result"></div>
</body>

<script>

    function requestTest(){
        $.rest("get", "http://localhost:9001/kx/user/test", null, function (data) {
            document.getElementById("result").innerHTML=JSON.stringify(data);
        });
    }

    function onSignInClick() {
        let signName = document.getElementById("signName").value;
        let password = document.getElementById("password").value;
        let jsonData = {};
        jsonData.signName = signName;
        jsonData.password = md5(password);

        //调用自己编写的base.js
        $.rest("post", "http://localhost:9001/kx/user/signin", jsonData, function (data) {
            let code = data.code;
            if (code == 200) {
                //登陆成功
                /** 响应回来的数据格式
                 * {
                        "code": 200,
                        "msg": "登陆成功",
                        "result": {
                            "user": {
                                "id": 1,
                                "username": "zhangsan",
                                "password": "",
                                "nickname": "张三",
                                "gender": "男",
                                "telephone": "15911135712",
                                "email": "zhangsan@qq.com",
                                "iconLink": "http://xuzhong.vip/icon/zhangsan.jpg"
                            },
                            "token": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiLlvKDkuIkiLCJpYXQiOjE2MjY0MTk4MTAsImV4cCI6MTYyNjQyMTYxMCwidXNlciI6IntcImVtYWlsXCI6XCJ6aGFuZ3NhbkBxcS5jb21cIixcImdlbmRlclwiOlwi55S3XCIsXCJpY29uTGlua1wiOlwiaHR0cDovL3h1emhvbmcudmlwL2ljb24vemhhbmdzYW4uanBnXCIsXCJpZFwiOjEsXCJuaWNrbmFtZVwiOlwi5byg5LiJXCIsXCJwYXNzd29yZFwiOlwiXCIsXCJ0ZWxlcGhvbmVcIjpcIjE1OTExMTM1NzEyXCIsXCJ1c2VybmFtZVwiOlwiemhhbmdzYW5cIn0ifQ.rANwleOoTdXAjL39H_9Cz0alww-LvGo5I7dH0jfzDX4"
                        },
                        "ok": true
                    }
                 */
                let token = data.result.token;
                let id=data.result.user.id;
                let username=data.result.user.username;
                let nickname=data.result.user.nickname;
                let gender=data.result.user.gender;
                let telephone=data.result.user.telephone;
                let email=data.result.user.email;
                let iconLink=data.result.user.iconLink;
                //前端开始保存，各种前端被服务器的支持是一致的。
                //前端H5把数据解析放入localStorage里
                //前端Android、iOS把数据放入SQLite里
                localStorage.setItem("token",token);
                localStorage.setItem("id",id);
                localStorage.setItem("username",username);
                localStorage.setItem("nickname",nickname);
                localStorage.setItem("gender",gender);
                localStorage.setItem("telephone",telephone);
                localStorage.setItem("email",email);
                localStorage.setItem("iconLink",iconLink);
                alert("登陆成功");
            } else if (code == 500) {
                //账号或密码错误
                alert("账号或密码错误")
            }else if (code == 501) {
                //账号已经被锁定
                alert("账号已经被锁定");
            }
        })
    };
</script>
</html>